<script>
let url = 'http://localhost:9701/web';

export default {
    name: 'HomeView',
    data() {
        return {
            ads: [
                'https://bpic.588ku.com/art_origin_min_pic/21/12/04/7f16da7d35b55f6ea7cdf8b5fe0650d4.jpg',
                'https://bpic.588ku.com/art_origin_min_pic/21/12/04/86dcf6799a156323be205012821d427c.jpg',
                'https://bpic.588ku.com/templet_list_pic/24/07/29/a6e1ed0caf637d7c0c998d31923d2f02.jpg',
                'https://bpic.588ku.com/templet_list_pic/24/06/06/ba272ed5069c60125410759b2cd35843.jpg',
                // 更多广告图片路径
            ],
            currentIndex: 0,
            searchKeyword: '',
            houseList: [],
            rentList: [],
            currentDetail: null,  // 用于存储当前查看的详情
            pageNum: 1,      // 当前页码
            pageSize: 10,    // 每页数量
            loading: false,  // 是否正在加载
            noMore: false,   // 是否还有更多数据
        };
    },
    computed: {
        currentAd() {
            return this.ads[this.currentIndex];
        }
    },
    mounted() {
        this.startSlider();
    },
    methods: {
        startSlider() {
            setInterval(() => {
                this.currentIndex = (this.currentIndex + 1) % this.ads.length;
            }, 3000); // 每3秒切换一次图片
        },
        viewRental() {
            this.$router.push({ path: '/' });
        },
        viewSublet() {
            this.$router.push({ path: '/indexSublet' });
        },
        accelerate() {
            this.$router.push('/accelerate');
        },
        house() {
            this.$router.push('/house');
        },
        release() {
            this.$router.push('/release');
        },
        details(id) {
            if (!id) {
                this.$message.warning('无效的记录ID');
                return;
            }
    

            this.$router.push({
                path: '/rentTransfer',
                query: { id: id  }
            });
        },

        // 加载数据的方法
        async loadRentList() {
            if (this.loading || this.noMore) return;
            try {
                this.loading = true;
                const response = await this.axios.post(url + `/required/getRequiredHouseList`, {}, {
                    params: {
                        current: this.pageNum,
                        size: this.pageSize
                    }
                });

                if (response.data.code === 200) {
                    const pageData = response.data.data;
                    // console.log(pageData);
                    const newList = pageData.records;  // 获取当前页数据
                    console.log(newList);

                    // 判断是否是最后一页
                    if (pageData.current >= pageData.pages) {
                        this.noMore = true;
                    }

                    // 如果是第一页，直接赋值，否则追加数据
                    if (this.pageNum === 1) {
                        this.rentList = newList;
                    } else {
                        this.rentList = [...this.rentList, ...newList];
                    }

                    this.pageNum++; // 页码加1
                }
            } catch (error) {
                console.error('获取租房列表失败：', error);
                this.$message.error('获取数据失败，请稍后重试');
            } finally {
                this.loading = false;
            }
        },
        // 触发加载更多
        loadMore() {
            this.loadRentList();
        },
        // 重置列表
        resetList() {
            this.pageNum = 1;
            this.noMore = false;
            this.rentList = [];
            this.loadRentList();
        },
    },
    created() {
        // 初始加载数据
        this.loadRentList();
    },
};
</script>

<template>
  <div class="home">
    <div class="topSearch">
      <div class="search">
        <span><a href="#" class="bj">北京</a></span>
        <el-input placeholder="搜索关键词" clearable></el-input>
        <div class="right">
          <el-button type="text" icon="el-icon-more"></el-button>
          <el-button type="text" icon="el-icon-s-help"></el-button>
        </div>
      </div>
    </div>

    <div class="fang">
      <div class="text-a">
        <a href="#" @click="viewRental()">房东直租</a>
        <a href="#" @click="viewSublet()">个人转租</a>
        <a href="#">求租房屋</a>
      </div>
      <div class="text-butt">
        <el-button type="text" icon="el-icon-position" class="button"></el-button>
      </div>
    </div>

    <div class="img">
      <img :src="currentAd" alt="Advertisement">
    </div>

    <div
      id="app"
      class="list-container"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
      infinite-scroll-immediate-check="true">
      <div v-for="(item, index) in rentList"
           :key="index"
           class="rent-item"
           @click="details(item.id)">
        <el-row :gutter="10">
          <div class="button-container">
            <el-button type="text" icon="el-icon-present" class="button"></el-button>
          </div>
          <el-col :span="20">
            <div class="user-info">
              <span class="nickname">{{ item.nickname }}</span>
              <span class="region">{{ item.location }}</span>
            </div>
            <div class="date-info">{{ item.createTime }}</div>
            <div class="rent-info">
              <span class="amount">{{ item.rent }}元/月</span>
            </div>
            <div class="description">{{ item.title }}</div>
          </el-col>
        </el-row>
      </div>

      <div class="loading-status" v-if="rentList.length > 0">
        <p v-if="loading">加载中...</p>
        <p v-else-if="noMore">没有更多了</p>
      </div>
    </div>
    <div class="footer">
      <div class="footer-item" style="color: #F4A780;">
        <el-button icon="el-icon-s-home"></el-button>
        <span>首页</span>
      </div>
      <div class="footer-item" @click="release">
        <el-button icon="el-icon-circle-plus-outline"></el-button>
        <span>发布</span>
      </div>
      <div class="footer-item" @click="accelerate">
        <el-button icon="el-icon-orange"></el-button>
        <span>加速器</span>
      </div>
      <div class="footer-item active" @click="house">
        <el-button icon="el-icon-user"></el-button>
        <span>我的</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  width: 390px;
  background-color: #fff;
}

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.footer-item button {
  background-color: transparent;
  font-size: 25px;
  border: none;
  color: unset;
}

.description{
  font-size: 16px;
  float: left;
}

.button-container button{
  float: left;
  font-size: 40px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rent-item {
  border: 1px solid #F4A780;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 15px;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  margin-left: 15px;
}

.user-info .nickname {
  font-weight: bold;
  font-size: 15px;
  color: #F4A780;
}

.region {
  color: #999;
}

.date-info {
  color: #999;
  margin-bottom: 5px;
  float: left;
  font-size: 12px;
  margin-top: 8px;
  margin-left: 15px;
}

.rent-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.amount {
  font-weight: bold;
  font-size: 15px;
  margin-left: 50px;
  margin-top: 5px;
  color: red;
}

.search-bar el-input {
  flex: 1;
  margin-right: 10px;
}

.category-buttons el-button {
  margin-right: 10px;
}

.img {
  width: 100%;
}

.img img {
  width: 100%;
  height: 140px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.fang {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.text-a {
  float: left;
  margin-left: 25px;
  margin-top: 5px;
}

.text-a .text-butt {
  display: flex;
  padding: 5px 5px;
  border-radius: 15px;
  width: 70px;
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

.text-a a {
  color: #5e5e5e;
  text-decoration: none;
  margin-right: 20px;
}

.text-a a:hover {
  color: #268bff;
  font-weight: bold;
}

.topSearch input {
  width: 200px;
  height: 30px;
  border-radius: 50px;
  padding-left: 40px;
}

.topSearch .el-input {
  width: 200px;
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.topSearch span {
  display: flex;
  font-size: 15px;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #f15a10;
}

.topSearch .bj {
  color: #f15a10;
  text-decoration: none;
}

.home {
  width: 390px;
  margin: 0 auto;
}

.topSearch {
  width: 100%;
  justify-content: space-between;
}

.list-container {
  height: calc(100vh - 180px); /* 减去头部和底部的高度 */
  overflow-y: auto;
  padding: 0 15px;
}

.loading-status {
  text-align: center;
  padding: 10px 0;
  color: #999;
  font-size: 14px;
}

.rent-item:last-child {
  margin-bottom: 60px;
}
</style>
